<template>
  <div class="fans-page">
    <el-page-header @back="$router.back()" content="粉丝管理" class="header">
    </el-page-header>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      option: {
        title: {
          text: "近一周访问人数",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["周日", "周一", "周二", "周三", "周四", "周五","周六"],
        },
        yAxis: {},
        series: [
          {
            name: "访问人数",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 12],
          },
        ],
      },
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(this.option);
  },
};
</script>

<style scoped>
.fans-page {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 25px;
}

.header {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
</style>
